<template>
  <a-row :gutter="10">
    <a-col :md="24" :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <div class="header_left">
            <div class="header_left_top">
              <!-- 表单搜索 -->
              <a-form-item label="任务名称检索: " :labelCol="labelCol">
                <a-input placeholder="请输入任务名称" />
              </a-form-item>
              <a-form-item label="指标名称检索: " :labelCol="labelCol">
                <a-input placeholder="请输入指标名称" />
              </a-form-item>
            </div>
          </div>
          <!-- 按钮 -->
          <div class="header_right">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button @click="searchReset" icon="reload">重置</a-button>
            </span>
          </div>
        </div>

        <!-- 表格区域 -->

        <!-- 
          columns    表头数组
          dataSource 展示内容的数组
          pagination 分页器
          loading    页面是否加载
          rowSelection   控制选中项

         -->
        <div style="margin-top: 15px">
          <a-table style="height: 500px" ref="table" size="middle" rowKey="id" :columns="columns"
            :dataSource="dataSource1" :pagination="ipagination" :loading="loading" :rowSelection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }">

            <!-- 状态展示 -->
            <span slot="status" slot-scope="text, record">
              <a-badge v-if="record.status == 3" status="error"
                :number-style="{ backgroundColor: '#52c41a', borderRadius: '2px', color: '#fff', padding: '4px  8px', }"
                text="未通过" />
              <a-badge v-else-if="record.status == 1" status="processing"
                :number-style="{ backgroundColor: '#ff9800', borderRadius: '2px', color: '#fff', padding: '4px  8px', }"
                text="修订中" />
              <a-badge v-else status="success"
                :number-style="{ backgroundColor: '#dd89f4', borderRadius: '2px', color: '#fff', padding: '4px  8px', }"
                text="通过" />
            </span>
            <!-- 操作 -->
            <span slot="action" slot-scope="text, record">
              <!-- 查看 -->
              <a v-if="record.action.includes('view')" class="action-btn">查看</a>
              &nbsp; &nbsp;
              <!-- 修订 -->
              <a-popconfirm placement="topRight" ok-text="确定" cancel-text="取消" @confirm="confirm"
                v-if="record.action.includes('view')">
                <template slot="title">
                  <p>请确认该条数据已修订？</p>
                </template>
                <a class="action-btn">修订</a>
              </a-popconfirm>
              &nbsp; &nbsp;
              <!-- 删除 -->
              <a-popconfirm placement="topRight" ok-text="确定" cancel-text="取消" @confirm="confirm"
                v-if="record.action.includes('view')">
                <template slot="title">
                  <p>你确定要删除这条数据吗?</p>
                </template>
                <a class="action-btn">删除</a>
              </a-popconfirm>

            </span>
          </a-table>
        </div>
      </a-card>
      <a-button class>上一步</a-button>
      <a-button @click="deleteTask()">下一步</a-button>
      <a-button class>重置</a-button>
      <a-button class>保存</a-button>
      <a-button class>完成</a-button>
    </a-col>
  </a-row>
</template>

<script>

import axios from 'axios';

export default {
  data() {
    return {
      loading: false,
      columns: [],
      dataSource1: [],
      selectedRowKeys: []
    }
  },
  mounted() {
    // 获取表头数据
    this.InternalTableHeader()
    // 获取表格数据
    this.InternalTable()
  },
  methods: {
    // 获取表头数据
    async InternalTableHeader() {
      const result = await axios.get('/mock/internalDataRightColumns')
      this.columns = result.data.data
      console.log(result, '获取模拟数据----------------InternalTableHeader')
    },
    // 或者表格数据
    async InternalTable() {
      const result = await axios.get('/mock/InternalDataevision')
      this.dataSource1 = result.data.data
      console.log(result, '获取模拟数据----------------')
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/listcommon.scss';

/* @import '~@assets/less/common.less'; */
/** Button按钮间距 */
:deep .ant-badge-status-error {
  //background-color:rgba($color: #000000, $alpha: 0);
  display: none !important;
}

:deep .ant-badge-status-processing {
  display: none !important;
}

:deep .ant-badge-status-success {
  display: none !important;
}

.ant-btn,
.action-btn {
  margin-left: 8px;
}

::v-deep .ant-table .ant-table-body .ant-table-thead .ant-table-selection-column {
  text-align: center !important;
}

::v-deep .ant-table-thead>tr>th .anticon-filter,
.ant-table-thead>tr>th .ant-table-filter-icon {
  left: 60px !important;
}

.breadcrumb {
  padding: 10px 15px;
  border: 1px solid #eee;
  margin-bottom: 15px;
}

.table-page-search-submitButtons .ant-btn {
  border: 1px solid rgb(209, 208, 208) !important;
}

.table-page-search-submitButtons .ant-btn-primary {
  color: #fff !important;
  background: #1890ff !important;
}

::v-deep .ant-spin-container .ant-pagination.mini .ant-pagination-total-text {
  position: absolute;
  left: 0;
}

.table-page-search-wrapper .header_right {
  justify-content: flex-start;
}

.avator {
  padding: 5px;
  background: #64c4ff;
  border-radius: 50px;
  color: #fff;
}
</style>